{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}

    <link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
    <style>
        .modal-lg-custom {
            max-width: 800px; /* 设置你想要的宽度 */
            margin: 0 auto;
        }

    </style>
    {% endblock %}
{% block content %}
<div class="navbar navbar-right" style="margin: 5px;">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addProduct">
        添加机种
    </button>
    <span></span>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addStation">
        增加站点
    </button>
    <span></span>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addProjectPersonel">
        人员配置
    </button>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#inviteModal">
        邀请成员
    </button>
    <span></span>
    <a href="{% url 'wiki_list' project_id=request.tracer.project.id %}" type="button" class="btn btn-default" id="">
        交接清单
    </a>

</div>
<div class="panel panel-default">
    
   
    <div class="panel-body">
        
<!-- 显示 Product 表数据 -->
<div class="container mt-4">
    <h2>机种列表</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
            <tr>
                <td>{{ product.id }}</td>
                <td>{{ product.name }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="3" class="text-center">没有机种数据</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<!-- 显示 人员配置 -->
<div class="container mt-4">
    <h2>线体负责人员配置</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>线长</th>
                <th>组长</th>
                <th>SMT</th>
                <th>AOI</th>
                <th>点胶</th>
                <th>PSA</th>
                <th>非标机</th>
                
            </tr>

        </thead>
        <tbody>
            {% for projectDRI in project_DRI_list %}
            <tr>
                <td>{{ projectDRI.manufactureruser }}</td>
                <td>{{ projectDRI.manufactureruser_leader }}</td>
                <td>{{ projectDRI.SMTuser }}</td>
                <td>{{ projectDRI.AOIuser }}</td>
                <td>{{ projectDRI.PSAuser }}</td>
                <td>{{ projectDRI.Glueuser }}</td>
                <td>{{ projectDRI.automatic }}</td>
            </tr>
            {% endfor %}
           
        </tbody>
    </table>
</div>
<!-- 显示 Station 表数据 -->
    <div class="container mt-4">
    <h2>站点列表</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>设备类型</th>
                <th>机台编号</th>
                <th>途程编号</th>
            </tr>
        </thead>
        <tbody>
            {% for projectstation in projectstations %}
            <tr>
                <td>{{ projectstation.id }}</td>
                <td>{{ projectstation.station.name }}</td>
                <td>{{ projectstation.station.catogory }}</td>
                <td>{{ projectstation.station.equip_no }}</td>
                <td>{{ projectstation.sequence }}</td>

            </tr>
            {% empty %}
            <tr>
                <td colspan="3" class="text-center">没有站点数据</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
       
    </div>
  </div>





    <!-- 增加  机种Modal -->
    <div class="modal fade" id="addProduct" tabindex="-1" role="dialog" aria-labelledby="addProductLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">增加机种</h4>
            </div>
            <div class="modal-body">
                <form id="addproductForm">
                    {% csrf_token %}
                     {% for field in productform %}
                    <div class="form-group">
                      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                      {{ field }}
                      <span class="error-msg"></span>
                    </div>
                    {% endfor %}
                  </form>
            
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="addProductButton">增加</button>
            </div>
        </div>
        </div>
    </div>

    <!-- 配置 人员Modal -->
    <div class="modal fade" id="addProjectPersonel" tabindex="-1" role="dialog" aria-labelledby="aaddProjectPersonelModalLabel">
        <div class="modal-dialog modal-lg-custom" role="document" style="width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">线体DRI人员配置</h4>
            </div>
            <div class="modal-body">
                <form id="addpersonForm">
                    {% csrf_token %}
                     {% for field in projectDRI_form %}
                        <div class="col-md-3">
                            <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            <span class="error-msg"></span>
                            </div>
                        </div>
                    {% endfor %}
                  </form>
            
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="addPersonelButton">增加</button>
            </div>
        </div>
        </div>
    </div>
    
    <!-- 增加  站点Modal -->
    <div class="modal fade" id="addStation" tabindex="-1" role="dialog" aria-labelledby="addSationModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">增加站点</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    {% csrf_token %}
                     {% for field in stationform %}
                    <div class="form-group">
                      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                      {{ field }}
                      <span class="error-msg"></span>
                    </div>
                    {% endfor %}
                     {% for field in project_stationform %}
                    <div class="form-group">
                      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                      {{ field }}
                      <span class="error-msg"></span>
                    </div>
                    {% endfor %}
                   
                  </form>
            
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="addStationButton">增加</button>
            </div>
        </div>
        </div>
    </div>

    <!-- 邀请成员模态对话框 -->
    <div class="modal fade" id="inviteModal" tabindex="-1" role="dialog" aria-labelledby="inviteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="inviteModalLabel">邀请成员</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="form-group clearfix">
                  
                    <div class="col-md-6 pd-0">
                        <label for="{{form.user.id_for_label}}" class="col-md-4 control-label">{{form.user.label}}</label>
                        <div class="col-md-8">
                            <div class="error-msg"></div>
                        </div>
                    </div>

                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="inviteButton">邀请</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <!-- 增加机种按钮点击事件 -->
    <script>
        var projectId = "{{request.tracer.project.id}}";  // 假设 project.id 在模板中可用

        $('#addProductButton').click(function() {
            
            $.ajax({
            url: "{% url 'add_product' project_id=request.tracer.project.id %}",
            type: "POST",
            data: $("#addproductForm").serialize(),
            dataType: "JSON",
            success: function (res) {
            console.log(res);
            if (res.status) {
                // location.href = location.href;
                location.reload();
            } else {
                // 显示错误信息
                console.log(res); // {status:False,error:{phone:["错误信息"，]}}
                $.each(res.error, function (key, value) {
                $("#id_" + key)
                    .next()
                    .text(value[0]);
        });
      }
    },
  });
        });
    </script>
    <!-- 增加配置人员  按钮点击事件 -->
    <script>
            var projectId = "{{request.tracer.project.id}}";  // 假设 project.id 在模板中可用

            $('#addPersonelButton').click(function() {

                

                $.ajax({
                url: "{% url 'add_personel' project_id=request.tracer.project.id %}",
                type: "POST",
                data: $("#addpersonForm").serialize(),
                dataType: "JSON",
                success: function (res) {
                console.log(res);
                if (res.status) {
                    // location.href = location.href;
                    location.reload();
                } else {
                    // 显示错误信息
                    console.log(res); // {status:False,error:{phone:["错误信息"，]}}
                    $.each(res.error, function (key, value) {
                    $("#id_" + key)
                        .next()
                        .text(value[0]);
            });
            }
        },
        });
            });
    </script>
    <!-- 增加站点   按钮点击事件 -->
    <script>
            var projectId = "{{request.tracer.project.id}}";  // 假设 project.id 在模板中可用

            $('#addStationButton').click(function() {
                

                $.ajax({
                url: "{% url 'add_station' project_id=request.tracer.project.id %}",
                type: "POST",
                data: $("#addForm").serialize(),
                dataType: "JSON",
                success: function (res) {
                console.log(res);
                if (res.status) {
                    // location.href = location.href;
                    location.reload();
                } else {
                    // 显示错误信息
                    console.log(res); // {status:False,error:{phone:["错误信息"，]}}
                    $.each(res.error, function (key, value) {
                    $("#id_" + key)
                        .next()
                        .text(value[0]);
            });
            }
        },
        });
            });
    </script>
    <!-- 邀请  按钮点击事件 -->
    <script>
        var projectId = "{{request.tracer.project.id}}";  // 假设 project.id 在模板中可用

        $('#inviteButton').click(function() {
            var userIds = $('#id_user').val();//
            console.log("userIds",userIds);

            if (userIds.length === 0) {
                alert('请选择要邀请的用户。');
                return;
            }

            $.ajax({
                url: '{% url "invite_users" project_id=request.tracer.project.id %}',
                method: 'POST',
                traditional: true,
                data: {
                    user_ids: userIds,
                    project_id: projectId,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                dataType: 'json',
                success: function(res) {
                    if(res.status){
                        alert(res.msg);
                        $('#inviteModal').modal('hide');
                    }else{
                        alert(res.msg)
                    }
                },
                error: function(res) {
                    alert('邀请失败，请重试。');
                }
            });
        });
    </script>
{% endblock %}